import React from "react";
import { connect } from "dva";
import {
  message,
  Input,
  Form,
  Modal,
  Table
} from "antd";
import "./Regionalism.less";
import { getAreaList, updateDesc } from "../../../services/fetch";

@Form.create()
class Regionalism extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      areaList: [],
      visible: false,
      current: {}
    };
  }

  componentDidMount() {
   this.getAreaList()
  }
  getAreaList=()=>{
    getAreaList().then(res => {
      if (res.data.code === 200) {
        this.setState({
          areaList: res.data.data
        });
      }
    });
  }
  handleEdit = item => {
    this.setState({ visible: true, current: item }, () => {
      this.props.form.setFieldsValue({
        name: item.name,
        description: item.desc || ""
      });
    });
  };
  handleEditCancel = () => {
    this.setState({ visible: false });
  };
  handleEditOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let params = {
          id: this.state.current.id,
          name: values.name,
          desc: values.desc,
          code:this.state.current.code,
          pid: this.state.current.pid
        };
        updateDesc(params).then(res => {
          if (res.data.code===200) {
            message.success(res.msg)
            this.getAreaList()
            this.setState({visible: false})
          }else{
            message.error(res.msg)
          }
        });
      }
    });
    // this.setState({visible:false})
  };
  render() {
    const { visible, areaList } = this.state;
    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: "城市",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "简介",
        dataIndex: "desc",
        key: "desc"
      },
      {
        title: "地区码",
        dataIndex: "code",
        key: "code"
      },
      {
        title: "操作",
        dataIndex: "action",
        key: "action",
        render: (text, record) => {
          return (
            <span
              style={{ color: "#1890ff", cursor: "pointer" }}
              onClick={this.handleEdit.bind(this, record)}
            >
              修改
            </span>
          );
        }
      }
    ];
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      }
    };
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    return (
      <section className="Regionalism">
        <header>全国行政区域</header>
        <div className="content">
          <Table
            columns={columns}
            rowKey={record => record.code}
            // rowSelection={rowSelection}
            dataSource={areaList}
          />
        </div>
        <Modal
          visible={visible}
          title={<div style={{ textAlign: "center" }}>修改简介</div>}
          onCancel={this.handleEditCancel}
          onOk={this.handleEditOk}
          width="500px"
        >
          <Form layout="horizontal">
            <Form.Item label="地区" {...formItemLayout}>
              {getFieldDecorator("name")(
                <Input placeholder="请输入城市名称" disabled />
              )}
            </Form.Item>
            <Form.Item label="简介" {...formItemLayout}>
              {getFieldDecorator("desc", {
                rules: [{ required: true, message: "请输入城市简介" }]
              })(<Input placeholder="请输入简介" />)}
            </Form.Item>
          </Form>
        </Modal>
      </section>
    );
  }
}

export default Regionalism;
